<template>
    <div class="dh-collapse">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { ref,provide,watch } from 'vue';
import {type nameType,collapseContextKey} from './type'
import type {collapseProps,collapseEmits} from './type'
const props = defineProps<collapseProps>()
const emits = defineEmits<collapseEmits>()
defineOptions({
    name:'DhCollapse'
})
//初始化一个点击数组
let activeName = ref<nameType[]>(props.modelValue)
watch(()=>props.modelValue,()=>{
    activeName.value = props.modelValue
})
//封装一个点击事件，谁点击谁添加activeName数组，点击一次添加一次
const handleractiveName = (item:nameType)=>{
   if(props.accordion) {
    activeName.value = [activeName.value[0] === item? '' : item]
   }else {
    let index = activeName.value.indexOf(item)
    if(index>-1) {
        activeName.value.splice(index,1)
    }else {
        activeName.value.push(item)
    }
   }
    emits('update:modelValue',activeName.value)
    emits('change',activeName.value)
}
//提供给子组件使用
provide(collapseContextKey,{
    activeName,
    handleractiveName
})
</script>

<style scoped>

</style>